<template>
	<view class="container">
		<view class="headView" style="background-color: #FFFFFF;" @click="headViewTap">
			<view style="display: flex;flex-direction: row;width: 100%;align-items: center;">
				<image class="headImgView" :src="userInfo.avatarUrl || 'https://ky.railshj.cn/protocol/icon/images/mine/mine_avatar.png'" mode="aspectFill"></image>
				<view v-if="isLogin" class="content">
					<view class="nickname uni-title-h2">{{userInfo.nickname||'未设置'}}</view>
					<view class="phone" style="margin-top: 10rpx;" v-if="userInfo.code">ID：{{userInfo.code}}</view>
					<view class="phone" v-if="userInfo.rankModel.name">身份：{{userInfo.rankModel.name}}</view>
				</view>
				<view class="" v-if="!isLogin">
					<view class="login uni-title-h5" @click="loginAction">登录/注册</view>
				</view>
				
			</view>
			<view style="flex-shrink: 0;" v-if="isLogin">
				<!-- <u-icon name="arrow-right" color="#999" size="15"></u-icon> -->
			</view>
		</view>
		<view class="orderView">
			<view class="title">
				<text style="font-weight: bold;">我的订单</text>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="color: #999;font-size: 28rpx;" @click="allOrder">全部订单</view>
					<!-- <u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon> -->
				</view>
			</view>
			<view class="orderCate">
				<view class="item" @click="orderCateTap(item)" v-for="(item, index) in orderTitles" :key='index'>
					<u-image :src='item.icon' width='50rpx' height='50rpx'></u-image>
					<text style="font-size: 26rpx;">{{item.title}}</text>
				</view>
			</view>
		</view>
		<!-- 功能区域  列表型-->
		<view v-if='false' v-for="(obj, inx) in itemListConfig" :key='inx'
		style="width: 690rpx;padding: 10rpx 30rpx;background-color: #FFFFFF;margin-top: 16rpx;">
			<view v-if="obj.title" style="width: 670rpx;height: 100rpx;line-height: 100rpx;margin-left: 20rpx;border-bottom: 1px solid #eeeeee;">{{obj.title}}</view>
			<view style="display: flex;flex-direction: column;">
				<view v-for="(item, index) in obj.items" :key="index" @click="itemTap(item, index)"
				style="height: 100rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 1px solid #eee;">
					<!-- <u-icon :customStyle="{paddingTop: 30+'rpx'}" :name="item.icon" :size="item.size" :color='item.color'></u-icon> -->
					<text style="margin-top: 12rpx;margin-bottom: 20rpx;font-size: 30rpx;">{{item.title}}</text>
					<u-icon name="arrow-right" color="#999" size="15"></u-icon>
				</view>
			</view>
		</view>
		<!-- 功能区域 横向-->
		<view v-for="(obj, inx) in itemListConfig" :key='inx'
		style="width: 710rpx;padding: 0 20rpx;background-color: #FFFFFF;margin-top: 16rpx;">
			<view style="width: 670rpx;height: 100rpx;line-height: 100rpx;margin-left: 40rpx;border-bottom: 1px solid #eeeeee;font-weight: bold;">{{obj.title}}</view>
			<view style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;">
				<view v-for="(item, index) in obj.items" :key="index" @click="itemTap(item, index)"
				style="width: 177rpx;display: flex;flex-direction: column;align-items: center;">
				<template v-if="item.name == 'server'">
					<button open-type='contact' session-from class="custom-button">
						<!-- <uni-icons :type="item.icon" size="26" color="#646566"></uni-icons> -->
						<u-icon :customStyle="{paddingTop:30+'rpx'}" :name="item.icon" size="32" :color='item.color'></u-icon>
						<text style="margin-top: 12rpx;margin-bottom: 20rpx;font-size: 26rpx;color: #646566">联系客服</text>
					</button>
				</template>
				<template v-else>
					<u-icon :customStyle="{paddingTop:30+'rpx'}" :name="item.icon" size="30" :color='item.color'></u-icon>
					<text style="margin-top: 12rpx;margin-bottom: 20rpx;font-size: 26rpx;">{{item.title}}</text>
				</template>
				</view>
			</view>
		</view>
		<jcTabbarItem :current="currentTabbarIndex" :list='dynamicTabbar'></jcTabbarItem>
	</view>
</template>

<script>
	import {
		user
	} from '@/api/user.js'
	import {
		update
	} from '@/common/utils/update.js'
	import { common } from '@/api/common.js'
	import {
		config
	} from "@/api/config.js";
import store from '../../store';
import {toLogin} from '@/router/index.js';
import jcTabbarItem from '@/components/jc-tabbarItem/index.vue'
	export default {
		components: {
			jcTabbarItem
		},
		data() {
			return {
				isLogin: false,
				dynamicTabbar: [],
				currentTabbarIndex: 0,
				userInfo: {},
				wxuserinfo: {},
				orderTitles: [{
						title: "待付款",
						name: '1',
						icon: '/static/common/mine/wait_pay.png',
						iconColor: '#FC5E53',
						value: ''
					},
					{
						title: "待发货",
						name: '2',
						icon: '/static/common/mine/wait_send.png',
						iconColor: '#FC5E53',
						value: ''
					},
					{
						title: "待收货",
						name: '3',
						icon: '/static/common/mine/wait_delivery.png',
						iconColor: '#FC5E53',
						value: ''
					},
					{
						title: "已完成",
						name: '4',
						icon: '/static/common/mine/finish.png',
						iconColor: '#d0541c',
						value: ''
					}
				],
				itemListConfig: [],
			}
		},
		onLoad() {

		},
		onShow() {
			uni.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			
			})
			
			this.dynamicTabbar = this.$store.getters.getDynamicTabbar
			var	tabbars = this.dynamicTabbar.filter(item=>item.key == this.$Route.name)
			this.currentTabbarIndex = tabbars.length>=1?tabbars[0].sort:'0'
			
			this.loadData()
		},
		//一定要在此处销毁监听事件，否则会造成多次跳转
		onUnload() {
			uni.$off('mineKey')
		},
		onPullDownRefresh() {
			this.loadData()
		},
		onShareAppMessage(res) {
			return {
				title: this.$store.getters.clientInfo.appname,
				path: 'pages/home/home',
				imageUrl: this.$store.getters.clientInfo.shareCoverUrl,
			}
		},
		methods: {
			loadData() {
				if (this.$storage.getStorageDataSync(store.state.token)) {
					this.isLogin = true
					this.getUserInfo()
				} else {
					this.isLogin = false
					this.userInfo = {}
					uni.stopPullDownRefresh()
				}
				this.getMinePageConfig()
			},
			loginAction(){
				toLogin()
			},
			headViewTap() {
				if (this.$storage.isLogin()) {
					this.$Router.push({
						name: 'personInfo'
					})
				}
			},
			//所有订单
			allOrder() {
				this.$Router.push({
					name: 'orderList',
					params: {
						current: '0'
					}
				})
			},
			//订单分类按钮
			orderCateTap(item) {
				this.$Router.push({
					name: 'orderList',
					params: {
						current: item.name
					}
				})
			},
			getMinePageConfig(){
				var userInfo = this.$storage.getStorageDataSync(this.$store.state.userInfo)||{}
				common.operateActionPost('interface/pageConfig/getMinePageConfig/', {userId: userInfo.id||''}).then(res=>{
					if (res.data.code == 10000) {
						this.itemListConfig = res.data.data.itemListConfig
					}
				})
			},
			itemTap(item, index) {
				if(item.name == 'suggest') {
					this.$refs.suggest.open('suggest')
				}else if(item.name == 'server') {
					
				}else if(item.name == 'parent'){
					var content = ''
					if(this.userInfo.parentModel.code){
						content = '推荐人ID：'+this.userInfo.parentModel.code
					}else{
						content = '推荐人ID：'+'无'
					}
					uni.showModal({
						content: content,
						confirmText: "确定",
						showCancel: false
					})
				}else if(item.name == 'logout'){
					var _this = this
					uni.showModal({
						content: "您确定退出本次登录？",
						confirmText: "确定",
						cancelText: "取消",
						success(res) {
							if(res.confirm){
								_this.$storage.removeStorageDataSync(store.state.token)
								_this.$storage.removeStorageDataSync(store.state.userInfo)
								toLogin()
							}
						}
					})
				}else if(item.name == 'signin'){
					
				}else{
					this.$Router.push({
						name: item.name,
						params: {
							name: item.name
						}
					})
				}
			},
			getUserInfo() {
				user.getUserInfo().then(res => {
					uni.stopPullDownRefresh()
					if (res.data.code == 10000) {
						this.userInfo = res.data.data
						this.$storage.setStorageDataSync(this.$store.state.userInfo, res.data.data)
					}
				})
			},
			//意见和建议
			suggest() {

			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		margin-bottom: 60rpx;
	}

	.headView {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 40rpx 20rpx;
		border-radius: 14rpx;
		width: 710rpx;
		.headImgView {
			width: 140rpx;
			height: 140rpx;
			border-radius: 20rpx;
			margin-left: 20rpx;
		}

		.content {
			margin-left: 16px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			.nickname {
				font-size: 34rpx;
			}

			.phone {
				font-size: 26rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}

		.login {
			margin-top: 40rpx;
			margin-left: 40rpx;
		}
	}
	// 订单
	.orderView{
		background-color: #FFFFFF;
		width: 750rpx;
		margin-top: 16rpx;
		border-radius: 14rpx;
		padding: 30rpx 0rpx;
	
		.title {
			margin: 0 60rpx;
			padding-bottom: 10rpx;
			border-bottom: 1px solid #eeeeee;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
	
		.orderCate {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
	
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 162.5rpx;
				margin-left: 20rpx;
				border-radius: 20rpx;
				position: relative;
	
				text {
					margin-top: 16rpx;
				}
			}
		}
	}
	.custom-button {
	  background-color: rgba(0, 0, 0, 0) !important; /* 设置按钮背景颜色 */
	  border: solid 0rpx #FFFFFF00; /* 移除边框 */
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 0!important;
	  line-height: 1.2;
	  // text-align: center;
	  // text-decoration: none;
	  // display: inline-block;
	  // width: 80rpx;
	  // height: 60rpx;
	  // line-height: 60rpx;
	}
	button::after {
		border: 1px solid rgba(0, 0, 0, 0) !important;
	}
</style>
